<template>
  <div class="c-dblock">
    <div
      class="c-dblock-item"
      :style="`border-color:${item.color}`"
      v-for="(item,index) in dataList"
      :key="`top-item-${index}`"
    >
      <div class="c-dblock-num">{{item.num}}</div>
      <div class="c-dblock-desc">{{item.name}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["dataList"],
  name: "data-v-dblock",
};
</script>

<style>
.c-dblock {
  display: flex;
  justify-content: space-around;
  flex: 1;
}
/* top data item */
.c-dblock-item {
  border-left: 2px solid #fff;
  padding-left: 15px;
  color: white;
}
.c-dblock-num {
  font-size: 24px;
}
.c-dblock-desc {
  padding-top: 5px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.63);
}
</style>